<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/exclusive.css" />
		<script src="../js/mui.min.js"></script>
		<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view all-top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品分类</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<div class="mui-content-padded" style="margin: 5px;" onclick="javascript:window.location.href='search.html'">
		    <div class="mui-input-row mui-search" style="top: 2.5rem; top:3rem; z-index: 1;  position: fixed; text-align: center; width: 98%;">
				<input type="search" class="mui-input-clear" placeholder="搜索你最爱的图书">
			</div>
		</div>
		<div class="mui-content mui-row mui-fullscreen" style="margin-top: 5.5rem;" >
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;"style="margin-top:12.5%;">
				<div id="item1" class="mui-control-content mui-active">
				</div>
				<div id="item2" class="mui-control-content">
				</div>
				<div id="item3" class="mui-control-content">
				</div>
			</div>
		</div>
		

			<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html = [];
			var bookClassfy=['文学','文艺','计算机','考试','少儿','生活','人文社科','经济管理','农业科技','音像'];
			var books=[['文学理论','文学史','散文','诗歌','中国小说'],['绘画技法','美术理论','雕塑','工艺美术','画册'],['语言','操作系统','网络','办公系统','图形','游戏','基础理论','数据库'],['会计','律师','公务员','计算机'],['儿童文学','少儿百科','低幼读物','少儿美术'],
			['体育','服装.编织','美容.美发','插花'],['马.恩.列斯.毛泽东思想','政治','军事','哲学'],['物业','评估','会计','审计','统计'],['农业基础科学','种植','养殖','农业','农机'],['生物科学','天文地球学','标准','计量'],['歌曲','曲艺','电视','软件']];
			for (var i = 0; i < bookClassfy.length; i++) {
				html.push('<a class="mui-control-item" href="#content' + i + '">'+ bookClassfy[i] + '</a>');
			}
			controls.innerHTML = html.join('');
			html = [];
			for (i = 0; i <bookClassfy.length; i++) {
				html.push('<div id="content' + i + '" class="mui-control-content" style="bacground-color:#FFFFF"><ul class="mui-table-view style="background-color:#FFFFF;">');
				var minClassfy=books[i];
				html.push('<p class="title">选择分类</p>');
				html.push('<li class="mui-table-view-cell" style="text-align:left;padding:2%;">');
				for (j = 0; j <minClassfy.length; j++) {
					html.push('<span style="margin:2%;font-size:15px;">'+ minClassfy[j] + '</span>');
				}
				html.push('</li></ul>');
				
				html.push('<ul class="mui-table-view mui-grid-view">');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="./exclusive.html"><img class="type-img" src="../images/book2.jpg"><div><span class="or-price" style="margin-right:1%;">¥39.90</span><span class="old_price">¥29.5</span></div></a>');
				html.push('</li>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="./exclusive.html"><img class="type-img" src="../images/book2.jpg"><div><span class="or-price" style="margin-right:1%;">¥39.90</span><span class="old_price">¥29.5</span></div></a>');
				html.push('</li>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="./exclusive.html"><img class="type-img" src="../images/book2.jpg"><div><span class="or-price" style="margin-right:1%;">¥39.90</span><span class="old_price">¥29.5</span></div></a>');
				html.push('</li>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="./exclusive.html"><img class="type-img" src="../images/book2.jpg"><div><span class="or-price style="margin-right:1%;">¥39.90</span><span class="old_price">¥29.5</span></div></a>');
				html.push('</li>');
			
			
				html.push('</ul>');
				html.push('<ul class="mui-table-view mui-grid-view">');
				html.push('<p class="title">热销排行</p>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="./exclusive.html" style="font-size:14px;">藏地密码1-9全集</a>');
				html.push('</li>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="./exclusive.html" style="font-size:14px;">中国公民科学素质系列读本-中学生</a>');
				html.push('</li>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="./exclusive.html" style="font-size:14px;">中国画写意大课堂·山石</a>');
				html.push('</li>');
				html.push('<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="./exclusive.html" style="font-size:14px;">那条时光流转的小巷</a>');
				html.push('</li>');
				html.push('</ul>');
				html.push('</div>');
			}
			contents.innerHTML = html.join('');
			 //默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
			contents.querySelector('.mui-control-content').classList.add('mui-active');
			
		</script>
	</body>
</html>
